import React, { PureComponent } from 'react'
import { UserContext, ThemeContext } from './context'

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>App</h1>
        <UserContext.Consumer>
          {
            value=>{
              return <ThemeContext.Consumer>
                {
                  theme=>{
                    return <div>
                      <p>name:{value.name}</p>
                      <p>age:{value.age}</p>
                      <p style={{color:theme.theme}}>theme:{theme.theme}</p>
                      <p style={{fontSize:theme.size}}>size:{theme.size}</p>
                    </div>
                  }
                }
              </ThemeContext.Consumer>
            
            }
          }
        </UserContext.Consumer>
      </div>
    )
  }
}

export default App